<template>
    <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType" :style="{
		background: navColor
	}">
        <div class="site-navbar__header">
            <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
                <a class="site-navbar__brand-lg" href="javascript:;">在线考试系统</a>
                <a class="site-navbar__brand-mini" href="javascript:;">考试</a>
            </h1>
        </div>
        <div class="site-navbar__body clearfix">
            <el-menu class="site-navbar__menu" mode="horizontal">
                <el-menu-item
                    class="site-navbar__switch"
                    index="nav-0"
                    @click="sidebarFold = !sidebarFold"
                >
                    <!-- <icon-svg name="zhedie"></icon-svg> -->
                    <!-- <i class="el-icon-s-unfold"></i> -->
                    <i class="el-icon-s-fold"></i>
                </el-menu-item>
            </el-menu>
            <el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
                <!-- <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
              <template slot="title">
                  <el-badge value="new">
                      <i class="el-icon-setting"></i>

                  </el-badge>
              </template>
                </el-menu-item>-->
                <!-- <el-menu-item index="10">嗨 ~ {{ roleLabel[role] }}</el-menu-item> -->
                <!-- <el-menu-item index="2" @click="$router.push({ path: '/setting' })">
              <i class="el-icon-user-solid"></i>
              <span slot="title">{{userName}}</span>
                </el-menu-item>-->

            

                <el-menu-item class="site-navbar__avatar" index="" style="cursor: default">
                    <el-dropdown :show-timeout="0" placement="bottom">
                        <span class="el-dropdown-link">
                            <!-- sdfdasdf -->
                            嗨 ~
                            <i class="el-icon-user-solid"></i>
                            <span slot="title">{{userName}}</span>
                            {{ roleLabel[role] }}
                            <!-- <img src="~@/assets/img/avatar.png" :alt="userName">{{ userName }} -->
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <!-- <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item> -->
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-menu-item>
				<el-menu-item index="nav-theme">
                    <el-color-picker v-model="navColor" show-alpha :predefine="predefineColors"></el-color-picker>
                </el-menu-item>
                <el-menu-item index="nav-3" @click="exit">
                    <i class="el-icon-switch-button"></i>
                    <span>退出</span>
                </el-menu-item>
	
            </el-menu>
        </div>
        <!-- 弹窗, 修改密码 -->
        <!-- <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password> -->
        <UpdatePassword v-if="updatePassowrdVisible" />
        <el-dialog title="修改密码" :visible.sync="updatePassowrdVisible" width="30%">
            <UpdatePassword />
        </el-dialog>
    </nav>
</template>

<script>
import UpdatePassword from "@/views/common/update-password";
import { clearLoginInfo } from "@/utils";
export default {
    components: {
        UpdatePassword
    },
    data() {
        return {
            updatePassowrdVisible: false,
            roleLabel: {
                student: "学生",
                teacher: "教师",
                admin: "管理员"
            },
            role: sessionStorage.role,
            userName: sessionStorage.userName,
            navColor: localStorage.getItem('nav_theme_color') ||  "rgba(255, 69, 0, 0.68)",
            predefineColors: [
                "#ff4500",
                "#ff8c00",
                "#ffd700",
                "#90ee90",
                "#00ced1",
                "#1e90ff",
                "#c71585",
                "rgba(255, 69, 0, 0.68)",
                "rgb(255, 120, 0)",
                "hsv(51, 100, 98)",
                "hsva(120, 40, 94, 0.5)",
                "hsl(181, 100%, 37%)",
                "hsla(209, 100%, 56%, 0.73)",
                "#c7158577"
            ]
        };
	},
	watch: {
		navColor (val) {
			localStorage.setItem('nav_theme_color', val)
		}	
	},
    computed: {
        navbarLayoutType: {
            get() {
                return this.$store.state.common.navbarLayoutType;
            }
        },
        sidebarFold: {
            get() {
                return this.$store.state.common.sidebarFold;
            },
            set(val) {
                this.$store.commit("common/updateSidebarFold", val);
            }
        },
        mainTabs: {
            get() {
                return this.$store.state.common.mainTabs;
            },
            set(val) {
                this.$store.commit("common/updateMainTabs", val);
            }
        }
        //   userName: {
        //     get () { return this.$store.state.user.name }
        //   }
    },
    methods: {
        // 修改密码
        updatePasswordHandle() {
            this.updatePassowrdVisible = true;
            // this.$nextTick(() => {
            //   this.$refs.updatePassowrd.init()
            // })
        },
        // 退出
        logoutHandle() {
            this.$confirm(`确定进行[退出]操作?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$http({
                        url: this.$http.adornUrl("/sys/logout"),
                        method: "post",
                        data: this.$http.adornData()
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            clearLoginInfo();
                            this.$router.push({ name: "login" });
                        }
                    });
                })
                .catch(() => {});
        },
        exit() {
            this.$confirm("是否退出", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.mainTabs = [];
                this.$router.replace({ path: "/login" });
                clearLoginInfo();
                this.$message({
                    type: "success",
                    message: "退出成功，请重新登录!"
                });
            });
        }
    }
};
</script>
